<template>
    <div>
        <input class="input" type="text" @keyup.enter="add" v-model="content">
    </div>
</template>

<script>
export default {
  data () {
    return {
      content: '',
      id: 0
    }
  },
  methods: {
    add () {
      if (this.content) {
        this.$emit('confirmAdd', {
          content: this.content,
          id: this.id++
        })
        this.content = ''
      }
    }
  }
}
</script>

<style scoped>
.input {
  width: 100%;
  height: 25px;

  border: none;
  background-color: #ccc;

  appearance: none;
}
</style>

